<template>
	<div class="projectsubset">
		<el-breadcrumb separator="/" class="bread-title">
			<el-breadcrumb-item v-if="pageType=='staff'" :to="{ path: '/staffmanage' }">员工管理</el-breadcrumb-item>
			<el-breadcrumb-item v-else :to="{ path: '/subcommission' }">项目分佣管理</el-breadcrumb-item>

			<el-breadcrumb-item>分佣设置</el-breadcrumb-item>
		</el-breadcrumb>

		<el-form  ref="ruleform"  label-width="140px" class="demo-ruleForm">
			<el-form-item label="楼盘名称："  required>
				<span>{{projectSetting.devName}}</span>
			</el-form-item>

			<el-form-item label="合作标签："  required>
				<el-select v-model="labelId" filterable style="width: 200px;">
					<el-option v-for="item in cooperationlist"
						:key="item.id"
						:label="item.labelName"
						:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="测算税后利润："  required>
				<el-input v-model="aftertaxProfit"  placeholder="" type="number" step='0.01'  @input.native="checkNum(aftertaxProfit)"  style="width: 200px;"></el-input>
			</el-form-item>
			<el-form-item label="项目等级：" required>
				<el-select v-model="projectLevelId" filterable style="width: 200px;">
					<el-option v-for="item in levellist"
						:key="item.id"
						:label="item.name"
						:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="开发商：" prop="developers" required>
				<span>{{projectSetting.developerName}}</span>
			</el-form-item>
			<el-form-item label="分佣设置：" required>
			</el-form-item>

			<div style="margin-left: 50px">
				<!-- 经服运营团队 -->
				 <div v-for="(item,index) in teamVoList">
					<!-- <h4>{{item.teamFlag == 1?'经服运营团队':'内部资源团队'}}</h4> -->
					<h4 v-if='item.teamFlag == 1'>经服运营团队</h4>
					<h4 v-if='item.teamFlag == 2'>内部资源团队</h4>
					<h4 v-if='item.teamFlag == 3'>市场拓展团队</h4>

					<el-button type="primary" @click="addline(item)">添加业务线+</el-button>
					<ul>
						<li v-for="(line,index) in item.lineVoList" class="marginL30">
							<div><span class="mariginR50">{{line.businessLineName}}</span><el-button type="text" @click="delline(line)">删除</el-button></div>
							<el-button class="marginL30" type="primary" @click="addstaff(line)">添加人员+</el-button>
							<ul v-if="line.staffRelList">
								<li v-for="(staff,idx) in line.staffRelList">
									<div style="margin-bottom: 5px;">
										<span class="mariginR50 marginL30"> 姓名：{{staff.staffName}} </span> 
										<span class="mariginR50 marginL30">职位：{{staff.stationName}}</span>
										<span class="mariginR50 marginL30">分佣比例：<el-input type="number" v-model="staff.proportion" style="width:90px;"  @blur="oninput"></el-input></span>
										<el-button type="text" @click="delstaff(staff)">删除</el-button>
									</div>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>

			<el-form-item style="margin-top: 80px">
				<el-button style="margin-left: 100px"  type="primary" @click="saveset()">保存</el-button>
				<el-button  type="primary" @click="cancel()">取消</el-button>
			</el-form-item>
		</el-form>

		<!-- 添加业务线 -->
		<el-dialog title="添加业务线" :visible.sync="dialogFormVisible" width="600px">
		  <div>
		 	<el-transfer
				filterable
				:filter-method="filterMethod"
				filter-placeholder="搜索业务线"
				:titles="['全部业务线', '已选中']"
				v-model="selectlinedata"
				target-order="original"
				:props="{
					key:'id',
					label:'businessLineName'
				}"
				:data="alllinebussine"
				>
			</el-transfer>
		  </div>
		  <div slot="footer" class="dialog-footer" style="text-align: center">
		    <el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="savehander">保存</el-button>
		  </div>
		</el-dialog>
		<!-- 添加人员 -->
		<el-dialog title="添加人员" :visible.sync="dialogFormVisible2" width="600px">
		  <div>
		 	<el-transfer
				filterable
				:filter-method="filterMethod2"
				filter-placeholder="搜索业务线"
				:titles="['全部员工', '已选中']"
				v-model="selectstaffData"
				target-order="original"
				:props="{
					key:'id',
					label:'staffName'
				}"
				:data="currentlineallstaff"
				>
			</el-transfer>
		  </div>
		  <div slot="footer" class="dialog-footer" style="text-align: center">
		    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
		    <el-button type="primary" @click="savestaffhander">保存</el-button>
		  </div>
		</el-dialog>

	</div>
</template>

<script>
	    import api from '@/api/apiPath'
		export default {
			data () {
				return {
					pageType:undefined,
					dialogFormVisible: false,
					dialogFormVisible2:false,
					cid: undefined,
					projectSetting:{},//基本信息
					projectLevelId:'',//项目等级
					levellist:[],//项目等级列表
					cooperationlist:[],
					labelId:'',//合作标签
					aftertaxProfit:undefined,//测算税后利润
					teamVoList:[],
					alllinebussine:[],//所有业务线的数据
					selectlinedata:[],//穿梭框选择的业务线数据
					existlinedata:[],//已存在展示的业务线
					currentline:[],//当前业务线的数据 

					currentlineallstaff:[],//当前业务线下的人员
					selectstaffData:[],//当前穿梭框选中的业务线下的员工
					existstaffdata:[],//当前展示的对于业务线下的员工
					currentlinestaffdata:{},//当前业务线数据 保存时确定是那个业务线下员工
					teamFlag:undefined,

					developerId:'',//开发商id 
					filterMethod(query, item) {
					    return item.businessLineName.indexOf(query) > -1;
					},
					filterMethod2(query, item) {
					    return item.staffName.indexOf(query) > -1;
					}
				}
			},
			methods:{
				checkNum(val){
				    let value = (val.toString().match(/^\d*(\.?\d{0,2})/g)[0])
				    this.$nextTick(()=>{
					    this.aftertaxProfit = value
				    })	
				},
				saveset(){
					  if (+this.aftertaxProfit == 0 || +this.aftertaxProfit > 100) {
						 this.$message({
						    message: '测算后净利润大于0小于100',
						    type: 'warning'
						 });
						 return
					  }
					 if (this.projectLevelId == '请选择') {
					 	this.$message({
					 	    message: '请选择项目等级',
					 	    type: 'warning'
					 	});
					 	return
					 }
					 if (this.existlinedata.length==0) {
					 	this.$message({
					 	    message: '请添加业务线',
					 	    type: 'warning'
					 	});
					 	return
					 }
					 if (this.existstaffdata.length==0) {
					 	this.$message({
					 	    message: '请添加业务线人员',
					 	    type: 'warning'
					 	});
					 	return
					 }
				 	 for(let item1 of  this.teamVoList){
				 	 	for(let item2 of item1.lineVoList){
				 	 		if (item2.staffRelList.length>0) {
				 	 			let num =0
					 	 		for(let item3 of item2.staffRelList){
				 	 				if (item3.proportion !== '') {
				 	 					num += Number(item3.proportion)
				 	 				}
				 	 			}
				 	 			if (parseFloat((num).toFixed(2))!==1) {
				 	 				this.$message({
				 	 				    message: '业务线内分佣比例需等于1',
				 	 				    type: 'warning'
				 	 				});
				 	 				return
				 	 			}
				 	 		}
				 	 	}
				 	 }

				 	 let temparr =[]
				 	 this.teamVoList.forEach((item,index)=>{
				 	  	item.lineVoList.forEach((item2,index)=>{
				 	  		if (item2.staffRelList.length>0) {
				  	 			item2.staffRelList.forEach((item3,index)=>{
				  	 				temparr.push(item3)
				  	 			})
				 	 	 	}
				 	 	 })
				 	  })

				 	 let obj = {}
				 	 obj['id']=this.projectSetting.id
				 	 obj['projectLevelId'] = this.projectLevelId
				 	 obj['aftertaxProfit'] = this.aftertaxProfit
				 	 obj['labelId'] = this.labelId
				 	 obj['list'] = temparr
				 	 this.axios.post(api.EDITPROJECTSTAFFREL,obj).then((res) => {
				 		 if (res.data.code == 200) {
				 			 	this.$message({
				 			 	    message: "保存成功",
				 			 	    type: 'success'
				 			 	});
				 			    this.cancel()
				 		 }
				 	 })
			   },

				oninput(e) {
					let reg = /(^[0-9]{1}[0-9]*$)|(^[0-9]*\.[0-9]{1,2}$)/;
					if (!reg.test(e.target.value)) {
					   this.$message({
					       message: '请输入正整数或保留两位的小数',
					       type: 'warning'
					   });
					   e.target.value = ""
					} 
				},

				cancel(){
					if (this.pageType == 'staff') {
						this.$router.push({path:'/staffmanage'})
					}else{
						this.$router.push({path:'/subcommission'})
					}
				},
				//删除业务线
				delline(val){
     		      //从展示的的数据中删除业务线 和改业务线下的员工
     		      this.teamVoList.forEach((item,index)=>{
     				 item.lineVoList.forEach((item2,index2)=>{
     				 	if (item2.businessLineId == val.businessLineId) {
							item2.staffRelList.forEach((item3,index3)=>{
								//从已存在该业务线的人员删除
								this.existstaffdata.splice(this.existstaffdata.indexOf(item3.staffId),1)
							})
     				 		this.teamVoList[index].lineVoList.splice(index2,1)
     				 	}
     				 })
     		      })
     		      //删除该业务线
				 this.existlinedata.splice(this.existlinedata.indexOf(val.businessLineId),1)
				},
				//删除人员
				delstaff(val){
				  this.teamVoList.forEach((item,index)=>{
				  	item['lineVoList'].forEach((item2,index2)=>{
				  		item2['staffRelList'].forEach((item3,index3)=>{
				  			if (item3.staffId == val.staffId) {
				  				this.teamVoList[index].lineVoList[index2].staffRelList.splice(index3,1)
				  			}
				  		})
				  	})
				  })
				  this.existstaffdata.splice(this.existstaffdata.indexOf(val.staffId),1)
				},
				//添加人员
				addstaff(val){
					this.teamFlag =val.teamFlag
					this.currentlinestaffdata = val
					this.axios.post(api.GETSTAFFBYLINEID,{businessLineId:val.businessLineId}).then((res) => {
						if (res.data.code == 200) {
							if (res.data.data == null) {
								this.currentlineallstaff = []
								return
							}
							this.currentlineallstaff = res.data.data
							this.currentlineallstaff.forEach((item2,index)=>{
									this.$set(this.currentlineallstaff[index],'disabled',this.existstaffdata.indexOf(item2.id) > -1)
							})
						}
					})
					this.dialogFormVisible2 = true
				},
				//保存添加人员
				savestaffhander(){	
					// 根据选中的业务线id从所有的当前员工列表中取出相关数据。
					let num =0
					let temparr =[]
					this.currentlineallstaff.forEach(item=>{
						if (this.selectstaffData.indexOf(item.id)>-1) {
							num += 1
							let obj ={}
							obj['staffId'] = item.id
							obj['staffName'] = item.staffName
							obj['blSeq'] = this.currentlinestaffdata.staffRelList.length+num
							obj['proportion'] = ''
							obj['stationName'] = item.stationName
							obj['teamFlag'] = this.teamFlag
							temparr.push(obj)
						}
					})

					// 添加到对应团队下对应业务线下的员工列表中
					this.teamVoList.forEach((item,index)=>{
						if (item.teamFlag == this.currentlinestaffdata.teamFlag) {
							item.lineVoList.forEach((item2,index2)=>{
								if (item2.businessLineId == this.currentlinestaffdata.businessLineId) {
									this.teamVoList[index].lineVoList[index2]['staffRelList'] = this.teamVoList[index].lineVoList[index2]['staffRelList'].concat(temparr)
								}
							})
						}
					})
					//将选中的数据添加到存在的
					this.existstaffdata.push(...this.selectstaffData)
					this.selectstaffData=[] //清空穿梭框中选择的数据
					this.dialogFormVisible2= false
				},
				//添加业务线
				addline(val){
					//当前业务线相关数据 保存时用
					this.currentline = val
					this.alllinebussine.forEach((item,index) => {
						this.$set(this.alllinebussine[index],'disabled',this.existlinedata.indexOf(item.id) > -1)
					})
					this.dialogFormVisible = true
				},
				//保存业务线
				savehander(){
				 //跟据当前加的业务线id  从所有业务线中获取对应的业务线的数据 然后添加到当前展示的数据列表中
				 let num = 0 //对业务线排序
				 let temparr = []
				 this.alllinebussine.forEach(item=>{
				 	if (this.selectlinedata.indexOf(item.id)>-1) {
				 		num += 1
				 		let obj ={}
				 		obj['businessLineId'] = item.id
				 		obj['businessLineName'] = item.businessLineName
				 		obj['blSeq'] = this.currentline.lineVoList.length+num//业务线顺序
				 		obj['teamFlag'] =  this.currentline.teamFlag
				 		obj['staffRelList'] =[]
				 		temparr.push(obj)
				 	}
				 })
				 //添加到当前团队业务线中
				  this.teamVoList.forEach((item,index)=>{
				 	if (item.teamFlag == this.currentline.teamFlag) {
				 		this.teamVoList[index].lineVoList = this.teamVoList[index].lineVoList.concat(temparr)
				 	}
				  })
				  //将选中的数据添加到存在的业务数组中
                  this.existlinedata.push(...this.selectlinedata)
                  this.selectlinedata=[] 
				  this.dialogFormVisible = false
				},
				projectlevel(){
					this.axios.post(api.PROJECTLEVEL,{developerId:this.developerId}).then((res) => {
						if (res.data.code == 200) {
						    this.levellist = res.data.data
						}
					})
				},
				cooperationlabel(){
					this.axios.post(api.COOPERATIONLABEGETALL).then((res) => {
						if (res.data.code == 200) {
						    this.cooperationlist = res.data.data
						    this.cooperationlist.unshift({id:0,labelName:'无'})
						}
					})
				},
				getStaffRelList(){
					this.axios.post(api.GETSTAFFRELLIST,{id:this.cid}).then((res) => {
						if (res.data.code == 200) {
							this.projectSetting = res.data.data.projectSetting
							this.developerId = this.projectSetting.developerId

							if (this.projectSetting.projectLevelId == 0) {
								this.projectLevelId  ='请选择'
							}else {
								this.projectLevelId = this.projectSetting.projectLevelId
							}
							this.aftertaxProfit = this.projectSetting.aftertaxProfit
							this.labelId = this.projectSetting.labelId
							this.teamVoList = res.data.data.teamVoList
							this.teamVoList.forEach(item=>{
								item.lineVoList.forEach(item2=>{
									//当前已存在的业务线
									this.existlinedata.push(item2.businessLineId)
									 //当前已存在的人员
									 item2['staffRelList'].forEach(item3=>{
									 	this.existstaffdata.push(item3.staffId)
									 })
									 
								})
							})
							//开发商下项目等级
							this.projectlevel()
						}
					})
				},
				//所有业务线
				alllinebussinehander(){
					this.axios.post(api.ALLSTAFFBUSINESSLINE).then((res) => {
						if (res.data.code == 200) {
							this.alllinebussine = res.data.data;
						}
					})
				},
			},
			created(){
				this.cid = this.$route.query.id
				this.pageType = this.$route.query.type
				this.getStaffRelList()
				this.alllinebussinehander()
				this.cooperationlabel()
			}
		}
</script>
<style lang="stylus">
	ul
		padding:0
	ul li 
		list-style:none
		
	.marginL30
		margin-left: 30px
	.mariginR50
		margin-right:30px
		
	.projectsubset 
		.el-transfer 
			.el-transfer-panel__body
				.el-checkbox, .el-checkbox__input
					display: block !important
		


</style>